<template>
  <div class="vendor-table">
    <el-button type="primary" size="small" @click="creatVendorClick">新建商家</el-button>
    <div class="order-btn">
      <span>排序：</span>
      <el-button type="warning" size="small" @click="sortByCreateTime">创建时间</el-button>
      <el-button type="primary" disabled="disabled" size="small">合同时间</el-button>
    </div>
    <el-table
      :data="vendorTableData"
      border
      style="width: 100%;font-size: 12px">
      <el-table-column
        prop="vendorCode"
        label="编码">
      </el-table-column>
      <el-table-column
        prop="vendorName"
        label="商家名称">
      </el-table-column>
      <el-table-column
        prop="address || '奢侈'"
        label="店铺类型">
      </el-table-column>
      <el-table-column
        prop="registerTime"
        label="创建时间">
      </el-table-column>
      <el-table-column
        prop="legalPerson"
        label="法人">
      </el-table-column>
      <el-table-column
        prop="registeredCapital"
        label="注册资金（万元）">
      </el-table-column>
      <el-table-column
        prop="taxationAffairsRegistration"
        label="税务登记">
      </el-table-column>
      <el-table-column
        prop="contactName"
        label="联系人">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="联系方式">
      </el-table-column>
      <el-table-column
        prop="shopAmount"
        label="店铺数量">
      </el-table-column>
      <el-table-column
        prop="auditStatus"
        :formatter="statusFormat"
        label="商家状态">
      </el-table-column>
      <el-table-column
        prop="id"
        label="操作"
      >
        <template scope="scope">
          <el-button class="view-detail-btn"
                     size="mini"
                     type="info"
                     @click.stop.prevent="detialsCheck(scope.$index)"
          >查看详情
          </el-button>
          <el-button size="mini"
                     type="warning"
                     class="off-line-btn"
                     disabled='disabled'>下线
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-sle">
      <el-pagination
        @size-change="pageSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listParam.pageNum"
        :page-size="listParam.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listParam.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import Hub from '@/assets/utils/Hub'
  import axios from 'axios'
  export default{
    data () {
      return {
        listParam: {
          pageNum: 1,
          pageSize: 10,
          total: 50,
          orderType: 1,
          startTime: '',
          endTime: ''
        },
        vendorTableData: []
      }
    },
    created () {
      Hub.$on('searchResultShot', (listData) => {
        this.vendorTableData = listData
      })
    },
    methods: {
      detialsCheck (index) {
        let id = this.vendorTableData[index].id
        this.$router.push('/get-detail/' + id)
      },
      // Request Function
      getList (params) {
        axios.post('/api/vendor/queryList', params).then((res) => {
          this.fullScreenLoading = false
          if (res.data.code === 9999) {
            this.vendorTableData = res.data.data.list
            this.listParam.pageSize = res.data.data.pageSize
            this.listParam.total = res.data.data.total
          }
        })
      },
      pageSizeChange (val) {
        this.listParam.pageSize = val
        this.getList(this.listParam)
      },
      handleCurrentChange (val) {
        this.listParam.pageNum = val
        this.getList(this.listParam)
      },
      creatVendorClick () {
        this.$router.push('/add-vendor')
      },
      sortByCreateTime () {
        if (this.listParam.orderType === 0) {
          this.listParam.orderType = 1
        } else {
          this.listParam.orderType = 0
        }
        this.getList(this.listParam)
      },
      statusFormat (r, c, v) {
        if (v === 0) {
          return '待审核'
        } else if (v === 1) {
          return '审核通过'
        } else {
          return '审批不通过'
        }
      }
    },
    mounted () {
      this.getList(this.listParam)
    }
  }
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .vendor-table {
    .order-btn {
      margin: 15px 0;
    }
    padding: 10px;
    .view-detail-btn {
      margin: 10px 0;
    }
  }
</style>
